<template>
	<div class="nav-swiper ">
		<div class="nav-swiper-main">
			<div class="swiper-t">
				<ul @mouseleave="mouseOut">
					<li v-for="item in firstList" :key="item.id" @mouseenter="mouseHover(item.id)" :class="item.id == currentIndex ? 'active' : ''">
						<span>{{ item.categoryName }}</span>
						<el-icon><DArrowRight /></el-icon>
					</li>

					<div class="active-r" v-if="isShow">
						<div class="active-r-t">
							<h3 class="active-title">基础知识</h3>
							<div>
								<div>知识点:</div>
								<ul>
									<li v-for="item in secondList" :key="item.id">{{ item.categoryName }}</li>
								</ul>
							</div>
						</div>
						<div class="active-r-b">
							<ul>
								<li v-for="item in courseList" :key="item.id">
									<img :src="item.courseCover" alt="" />
									<div>
										<div class="title">{{ item.courseName }}</div>
										<div class="level">{{ courseTypeFn(item.courseLevel) }}*{{ item.clicks }}人报名</div>
										<div class="free">免费学习</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</ul>
				<div>
					<el-carousel :interval="2000" arrow="always" v-if="sliderList.length > 0">
						<el-carousel-item v-for="item in sliderList" :key="item.id"><img :src="item.imageUrl" alt="" /></el-carousel-item>
					</el-carousel>
				</div>
			</div>
			<ul class="swiper-b">
				<li>
					<img src="../../assets/chuji.png" alt="" />
					<div>
						<h2>初级课程</h2>
						<span>入门快速,岗位多</span>
					</div>
				</li>
				<li>
					<img src="../../assets/zhongji.png" alt="" />
					<div>
						<h2>中级课程</h2>
						<span>进阶与实战</span>
					</div>
				</li>
				<li>
					<img src="../../assets/gaoji.png" alt="" />
					<div>
						<h2>高级课程</h2>
						<span>轻松掌握核心技术</span>
					</div>
				</li>
				<li>
					<img src="../../assets/xiangmu.png" alt="" />
					<div>
						<h2>项目实战</h2>
						<span>手把手实战</span>
					</div>
				</li>
				<li>
					<img src="../../assets/suanfa.png" alt="" />
					<div>
						<h2>前端算法</h2>
						<span>笑傲江湖的技能</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup>
// element
import { DArrowRight } from '@element-plus/icons-vue';

// api
import { getSliders, getFirstCategorys, getSecondCategorys, courseSearch } from '@/utils/api/slider';

// 混入mixin:
import courseType from '@/mixins/courseType';
let { courseTypeFn } = courseType();

// 初始化 响应式 轮播图数据:
let sliderList = ref([]);
// 右侧数据切换
let isShow = ref(false);
// 初始化 响应式 一级分类数据:
let firstList = ref([]);
// 初始化 响应式 二级分类数据:
let secondList = ref([]);
// 初始化 响应式 课程数据:
let courseList = ref([]);
// 控制li的显示class
let currentIndex = ref('');

// 生命周期:
onBeforeMount(() => {
	// 轮播图数据:
	getSliders().then(res => {
		sliderList.value = res.data.list;
		console.log('轮播图数据:', res.data.list);
	});

	// 一级分类数据:
	getFirstCategorys().then(res => {
		firstList.value = res.data.list;
		console.log('一级分类数据:', res.data.list);
	});
});

// 鼠标移入
const mouseHover = id => {
	// 显示出来
	isShow.value = true;
	currentIndex.value = id;
	// 获取二级分类
	getSecondCategorys({
		categoryId: id
	}).then(res => {
		secondList.value = res.data.list;
		console.log('二级分类数据:', res.data.list);
	});

	// 获取课程
	courseSearch({
		pageNum: 1,
		pageSize: 4,
		entity: {
			firstCategory: id
		}
	}).then(res => {
		courseList.value = res.data.pageInfo.list;
		console.log('课程信息:', res.data.pageInfo.list);
	});
};
// 鼠标移出
const mouseOut = () => {
	// 关闭显示
	isShow.value = false;
	currentIndex.value = '';
};
</script>

<style scoped>
.nav-swiper {
	width: 100%;
	height: 600px;
	background: url('@/assets/transitionbg.png') no-repeat;
}
.nav-swiper-main {
	width: 1000px;
	padding: 47px 0;
	margin: 0 auto;
	/* background-color: antiquewhite; */
}
.swiper-t {
	display: flex;
	height: 373px;
	border-radius: 11px 11px 0 0;
}
.swiper-t > ul {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	width: 160px;
	height: 100%;
	background: #2b283d;
	border-radius: 11px 0 0 0;
	padding-top: 15px;
	padding-bottom: 10px;
}
.swiper-t > ul > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* vertical-align: middle; */
	width: 120px;
	height: 35px;
	font-size: 16px;
	color: #f2f2f2;
	padding-right: 5px;
	margin-left: -15px;
	cursor: pointer;
}
.active {
	background: linear-gradient(
		90deg,
		#3fe5ff 0%,
		rgba(62, 222, 255, 0.93) 2%,
		rgba(60, 203, 255, 0.73) 9%,
		rgba(58, 186, 255, 0.56) 17%,
		rgba(57, 172, 255, 0.41) 25%,
		rgba(55, 160, 255, 0.28) 33%,
		rgba(54, 150, 255, 0.18) 43%,
		rgba(53, 142, 255, 0.1) 53%,
		rgba(53, 137, 255, 0.04) 64%,
		rgba(53, 133, 255, 0.01) 77%,
		rgba(53, 133, 255, 0) 100%
	);
}
.active-r {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: absolute;
	top: 0;
	left: 160px;
	z-index: 999;
	width: 724px;
	height: 373px;
	/* border-radius: 11px 11px 0 0; */
	background: #ffffff;
}
.active-r-t {
	padding: 23px 30px;
}
.active-title {
	font-size: 18px;
	font-weight: bold;
}
.active-r-t > div {
	display: flex;
	margin-top: 11px;
}
.active-r-t > div ul {
	display: flex;
	flex-wrap: wrap;
	margin-left: -37px;
}
.active-r-t > div ul li {
	margin-left: 20px;
}

.active-r-b {
	width: 724px;
	height: 217px;
	background: #f3f5f6;
}
.active-r-b > ul {
	display: flex;
	flex-wrap: wrap;
}
.active-r-b > ul li {
	display: flex;
	padding: 20px 20px 0px 0px;
}
.active-r-b > ul li img {
	width: 140px;
	height: 81px;
}
.active-r-b > ul li div {
	width: 165px;
	height: 80px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 10px;
	padding-left: 3px;
}
.active-r-b .title {
	font-weight: bold;
}
.active-r-b .level {
	font-size: 10px;
}
.active-r-b .free {
	font-size: 8px;
	color: #5555ff;
}
.swiper-t > div {
	width: 840px;
}

.el-carousel img {
	width: 100%;
	height: 373px;
}
::v-deep .el-carousel__container {
	height: 373px;
}
.el-carousel__item h3 {
	color: #475669;
	opacity: 0.75;

	line-height: 373px;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
	background-color: #d3dce6;
}

.swiper-b {
	display: flex;
	width: 1000px;
	background: #ffffff;
}
.swiper-b > li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 133px;
	cursor: pointer;
	padding-right: 20px;
}
.swiper-b > li > img {
	width: 64px;
	height: 64px;
}
.swiper-b li div {
	margin-left: 10px;
}
.swiper-b li span {
	font-size: 12px;
	color: #808080;
}
</style>
